<%--
  Created by IntelliJ IDEA.
  User: ASUS
  Date: 2021/6/5
  Time: 11:25
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
  <head>
    <title>登录</title>
    <script type="text/javascript" src="js/jquery-1.11.1.js"></script>
    <script type="text/javascript" src="js/bootstrap.js"></script>
    <link rel="stylesheet" href="css/bootstrap.css">
    <style>
      .mylogin {
        width: 400px;
        padding: 50px;
        margin-top: 100px;
        border: solid #cccccc 1px;
        border-radius: 10px;
        background-color: rgba(220,38,38,0.1);
      }
    </style>
    <script>
      $(function(){

        $("#userName").keyup(function(){
          validateName();
        })
        $("#userPassword").keyup(function(){
          validatePassword1();
        })
        $("#formofme").submit(function(){
          return login();
        })
        $("#btnreset").click(function(){
          var listspan = $("span[id$=Msg]");
          for(var i=0;i<listspan.length;i++) {
            $(listspan[i]).html("");
          }
        })
      })
      function validateName(){
        var userName = $("#userName").val();
        var nameMsg = $("#nameMsg");
        //4到16位（字母，数字，下划线，减号）
        var uPattern = /^[a-zA-Z0-9_-]{4,16}$/;
        if(userName!=null && userName!="") {
          if(userName.match(uPattern)){
            nameMsg.html("符合规则.");
            nameMsg.css("color","green");
            return true;
          } else {
            nameMsg.html("提示：4到16位<br>（字母，数字，下划线，减号）");
            nameMsg.css("color","red");
            return false;
          }
        } else {
          nameMsg.html("不能为空!");
          nameMsg.css("color","red");
          return false;
        }
      }
      function validatePassword1() {
        // 最少6位，包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符
        var password1 = $("#userPassword").val();
        var pwd1Msg = $("#pwd1Msg");
        var pPattern = /^.*(?=.{6,})(?=.*\d)(?=.*[A-Z])(?=.*[a-z])(?=.*[!@#$%^&*? ]).*$/;
        if(password1!=null && password1!="") {
          if(password1.match(pPattern)){
            pwd1Msg.html("密码符合规则.");
            pwd1Msg.css("color","green");
            return true;
          } else {
            pwd1Msg.html("提示：最少6位<br>包括至少1个大写字母，1个小写字母，1个数字，1个特殊字符>");
            pwd1Msg.css("color","red");
            return false;
          }
        }else {
          pwd1Msg.html("不能为空!");
          pwd1Msg.css("color","red");
          return false;
        }
      }
      function login() {
        return validateName()&&validatePassword1();
      }
    </script>
  </head>
  <body>
  <div class="container mylogin">
    <h1 style="text-align: center;">登录</h1>
    <form  id="formofme" action="mylogin1" method="post" role="form"   >

      <div class="form-group ">
        <label for="userName" >*用户名：</label><input type="text" id="userName"name="userName"  class="form-control"   placeholder="请输入用户名"required /><span id="nameMsg" ></span>
      </div>
      <div class="form-group ">
        <label for="userPassword" >*密码：</label><input type="password" id="userPassword"name="userPassword" class="form-control " placeholder="请输入密码" required /><span id="pwd1Msg"></span>
      </div>
      <div class="btn">
        <button type="submit" class="btn btn-success">登录</button>
        <button id="btnreset" type="reset" class="btn btn-default" style="margin-left: 145px">重置</button>
      </div>

    </form>
  </div>

  </body>
</html>
